<template>
	<view>
		<view class="main">
			<view class="item">
				<tem-canva :opts="tem"></tem-canva>
			</view>
			<view class="item">
				<hum-canva :opts="hum"></hum-canva>
			</view>
			
			<!-- <view class="item">
				<u-subsection :list="list" :current="curNow" @change="sectionChange"></u-subsection>
			</view> -->
			
			<!-- <view>
				<view class="item">
					<qiun-data-charts type="line" :chartData="chartTem" />
				</view>
				<view class="item">
					<qiun-data-charts type="line" :chartData="chartHum" />
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import TemCanva from '@/component/tem-canva/tem-canva.vue'
	import HumCanva from '@/component/hum-canva/hum-canva.vue'
	export default {
		components: {
			TemCanva,
			HumCanva
		},
		data() {
			return {
				loading: true,
				subscription: {
					topic: '/sensor/tem_hum',
					qos: 0,
				},
				tem: {
					series: [{
						data: ''
					}],
					title: {
						name: ''
					}
				},
				hum: {
					series: [{
						data: ''
					}],
					title: {
						name: ''
					}
				},
				// list: ['小时', '天', '周'],
				// curNow: 0,
				// chartTem: {
				// 	categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
				// 	series: [{
				// 		name: "温度",
				// 		data: [26,20, 25, 24, 22],
				// 		color: "#FAC858"
				// 	}]
				// },
				// chartHum: {
				// 	categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
				// 	series: [{
				// 		name: "温度",
				// 		data: [30, 40, 25, 37, 50, 20],
				// 		color: "#1890FF"
				// 	}]
				// }
			}
		},
		methods: {
			// sectionChange(index) {
			// 	this.curNow = index;
			// 	console.log(index)
			// 	this.chartHum.series[0].data = [36, 45, 20, 32, 51, 70]
			// }
		},
		onLoad() {
			this.mqtt.subscribe(this.subscription.topic, this.subscription.qos)
			this.mqtt.on('message', (topic, message) => {
				this.loading = false;
				const res = JSON.parse(message)
				//温度
				this.tem.series[0].data = (res.temperature) / 100
				this.tem.title.name = res.temperature
				//湿度
				this.hum.series[0].data = (res.humidity) / 100
				this.hum.title.name = res.humidity
			})

		},
		onUnload() {
			this.mqtt.unsubscribe(this.subscription.topic)
		}
	}
</script>

<style>
	.main {
		margin: 10px 10px 10px 10px;
	}

	.item {
		margin-top: 10px;
	}
</style>